<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">

        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>
    </el-form>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="id" width="180"/>
            <el-table-column prop="constanttypecode" label="常数类别编码" width="180"/>
            <el-table-column prop="constanttypename" label="常数类别名称" width="180"/>
            <el-table-column label="操作">
                <template #default="solt">
                    <el-button link type="primary" size="small" @click="toEdit(solt)"> 编辑</el-button>
                    <el-button link type="primary" size="small" @click="removeById(solt.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>

    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
    <el-dialog v-model="editDialogFormVisible" title="添加常数类别" width="500">
        <el-form :model="editForm" label-width="auto">
            <el-form-item label="常数类别编码">
                <el-input v-model="editForm.constanttypecode"/>
            </el-form-item>
            <el-form-item label="常数类别名称">
                <el-input v-model="editForm.constanttypename"/>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>


<script setup>
    import {onMounted, onUnmounted, ref} from 'vue'
    import {ElMessageBox, ElNotification} from 'element-plus'
    import service from '@/utils/request'

    let form = ref({});
    let editForm = ref({
        id:'',
        constanttypecode:'',
        constanttypename:''
    });
    //是否显示 dialog
    let editDialogFormVisible = ref(false);

    //提交数据 到
    function onSubmit() {
        console.log("form", form.value);
    }

    //表格的数据
    let tableData = ref([])

    function toAdd() {
        editForm.value.id=null
        editForm.value.constanttypecode=null
        editForm.value.constanttypename=null
        editDialogFormVisible.value = true;
    }

    function save() {
        //1 获取添加的表单信息
        console.log("editForm.value: ", editForm.value);

        service.post("/constanttype/add",editForm.value).then(
            res=>{
                console.log(res.data)
                // 3  判断 请求结果，成功与否
                editDialogFormVisible.value = false;

                if(res.data){
                    // 给与用户反馈
                    ElNotification({
                        title: '提示',
                        message: '保存成功!!!!!!!!!!!!!',
                        type: 'success',
                    })
                    listData();
                }else{
                    // 给与用户反馈
                    ElNotification({
                        title: '提示',
                        message: '保存失败!!!!!!!!!!!!!',
                        type: 'error',
                    })
                }
            }
        )


    }

    function listData(){
        service.get("/constanttype/list").then(
            res => {
                console.log(res)
                tableData.value = res.data
            }
        )
    }

    function toEdit({row}) {
      const id = row.id
          service.get('/constanttype/getById/'+id).then(({status, data}) => {
            //根据用户id ，查询当前待修改的数据
            editDialogFormVisible.value = true;
            editForm.value.id = data.id
            editForm.value.constanttypecode = data.constanttypecode
            editForm.value.constanttypename = data.constanttypename
            editDialogFormVisible.value = true;
          })


    }
    function removeById(id){

      //确认是否删除
      ElMessageBox.confirm(  '是否确认删除?',  'Warning',   {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            service.get('/constanttype/deleteById/'+id).then(({status ,data})=>{
              if(data){
                // 给与用户反馈
                ElNotification({
                  title: '提示',
                  message: '删除成功!!!!!!!!!!!!!',
                  type: 'success',
                })
                //查询最新的数据
                listData();
              }else{
                // 给与用户反馈
                ElNotification({
                  title: '提示',
                  message: '删除失败',
                  type: 'error',
                })
              }
            })
          })
    }
    onMounted(() => {
      listData()
    })
</script>